<template>
	<div class="echarts_pie" :style="propValue.style">
		<div class="echarts_line_title">漏洞等级分布</div>
		<div id="pie" style="width: 100%; height: 220px"></div>
	</div>
</template>

<script>
import * as echarts from 'echarts';

export default {
	name: 'BarChart',
	props: {
		propValue: {
			type: Object,
		}
	},
	methods: {
		renderChart() {
			this.$nextTick(() => {
				const barChart = echarts.init(document.getElementById(`pie`));
				let seriesData = [
					{ value: 110, name: '超危' },
					{ value: 150, name: '高危' },
					{ value: 160, name: '中危' },
					{ value: 72, name: '低危' },
					{ value: 79, name: '信息' }
				];
				const option = {
					legend: {
						icon: 'circle',
						orient: 'vertical', // 图例的布局朝向
						right: 20, // 图例组件离容器右侧的距离
						top: 60, // 图例组件离容器上侧的距离
						itemWidth: 10, // 图例标记的宽度
						itemHeight: 10, // 图例标记的高度
						textStyle: {
							rich: {
								circle: {
									width: 10,
									height: 10,
									align: 'center'
								}
							}
						},
						data: ['超危', '高危', '中危', '低危', '信息'],
						formatter: function (name) {
							let index = 0;
							let value = 0;
							let rate = 0;
							seriesData.forEach((item, i) => {
								if (item.name == name) {
									value = item.value ? item.value : 0;
									rate = item.rate ? item.rate : 0;
									index = i;
								}
							});
							return `{a|  ${name}}    {${index}|${value}}`;
						}
					},
					title: {
						text: `{a| 漏洞总数 }`,
						textStyle: {
							rich: {
								a: {
									fontSize: 14,
									color: '#000'
								}
							}
						},
						subtext: `{a|${571 + '个'}}`,
						subtextStyle: {
							rich: {
								a: {
									fontSize: 14,
									color: '#000',
									padding: [0, 0, 0, 12]
								}
							}
						},
						x: '45%',
						y: '42%'
					},
					tooltip: {
						show: true
					},
					series: [
						{
							type: 'pie',
							radius: ['50%', '70%'], // 设置内外半径比例
							clockwise: true, //饼图的扇区是否是顺时针排布
							label: {
								show: false // 设置标签不显示
							},
							data: seriesData,
							itemStyle: {
								borderWidth: 4, // 设置每个扇形之间的间隙大小为 10px
								borderColor: '#FFF'
							}
						}
					]
				};
				// barChart.setOption(option);
			});
		}
	},
	watch: {
		optData: {
			handler(newVal, oldVal) {
				this.renderChart();
			},
			immediate: true, // 立即触发一次
			deep: true
		}
	}
};
</script>
<style lang="less" scoped>
.echarts_pie {
	background-color: #fff;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 20px 20px 0px 20px;
	margin: 10px 10px 0 10px;
	.echarts_line_title {
		font-family: PingFang SC;
		font-weight: 600;
		color: #777777;
		font-size: 16px;
		line-height: normal;
	}
}
</style>
